TinyJS is a lightweight JavaScript library designed to facilitate the dynamic creation of HTML elements. It streamlines the process of manipulating the Document Object Model (DOM) by allowing developers to generate standard HTML tags programmatically, apply properties, append content, and select DOM elements with ease. One of the key features of TinyJS is its ability to dynamically create HTML elements. Users can generate any standard HTML tag effortlessly, which is particularly useful for building user interfaces. The library also supports deep property assignment, enabling developers to work with nested property structures for more complex elements. Additionally, it simplifies content appending by accepting both strings and elements as child content, making it versatile for various use cases. TinyJS introduces two helper functions for DOM selection: the `$` function, which acts as a wrapper around `document.querySelector`, and the `$$()` function, which wraps `document.querySelectorAll` and returns an array of DOM elements. This allows for straightforward element selection and iteration, enhancing the overall usability of the library. To illustrate its functionality, an example is provided where a `div` element is created with specific attributes and child elements, such as an `h1` and a `p`. This demonstrates how TinyJS can be used to generate and manipulate HTML elements dynamically. For installation, users simply need to include the `tiny.js` script in their project. Once included, they can utilize any valid HTML tag as a function to create elements, assign properties, and append children to the DOM. An advanced example showcases how properties can be deeply assigned to elements, such as styling a button directly through its properties. TinyJS supports a wide range of HTML tags, including basic text elements, interactive elements, media elements, and container elements, making it a comprehensive tool for web development. The library encourages contributions from the community, asking users to open an issue before submitting a pull request. Overall, TinyJS provides a simple yet powerful utility for developers looking to enhance their web applications with dynamic HTML element creation.

TinyJS is a lightweight JavaScript library designed to simplify the process of dynamically creating HTML elements. It allows developers to generate standard HTML tags programmatically, making DOM manipulation more straightforward and efficient. The library supports deep property assignment, enabling users to work with nested property structures for more complex elements. One of the key features of TinyJS is its ability to dynamically create HTML elements. Users can generate any standard HTML tag with ease, apply properties, and append content, whether it be strings or other elements. Additionally, TinyJS provides convenient functions for selecting DOM elements, using `$` for single selections and `$$()` for multiple selections. The library operates by attaching functions for each HTML tag to the global window object. This means that developers can create elements simply by calling the tag name as a function, passing in optional properties and child elements. For example, to create a `div` with specific attributes and child elements, one can use a syntax that resembles native JavaScript but is more concise and intuitive. TinyJS also includes helper functions that enhance its usability. The `$` function acts as a wrapper around `document.querySelector`, allowing for easy selection of a single DOM element, while `$$()` wraps `document.querySelectorAll`, returning an array of elements for easy iteration. An example of using TinyJS might involve creating a `div` that contains an `h1` and a `p` element. This is done by calling the respective tag functions and passing in the desired properties and content. The created elements can then be appended to the document body or any other parent element. Installation of TinyJS is straightforward; developers simply need to include the `tiny.js` script in their project. Once included, they can utilize any valid HTML tag as a function to create elements, assign properties, and append children to the DOM. The library supports a wide range of HTML tags, including basic text elements like `p` and `span`, interactive elements such as `button` and `input`, media elements like `img` and `video`, and various container elements including `div` and `section`. For those interested in contributing to TinyJS, the repository encourages users to open an issue before submitting a pull request, fostering a collaborative development environment. Overall, TinyJS offers a powerful yet simple solution for developers looking to enhance their web applications with dynamic HTML element creation.

WebJSX is a library designed for building web applications using JSX and Web Components, emphasizing simplicity and efficiency. It provides two primary functions: `createElement`, which allows developers to create virtual DOM elements using JSX syntax, and `applyDiff`, which efficiently updates the real DOM by comparing virtual nodes. The library supports a straightforward installation process via npm, enabling developers to quickly integrate it into their projects. It fully embraces JSX syntax, allowing for the creation of virtual DOM elements and the updating of the real DOM seamlessly. For instance, a simple virtual DOM can be defined using JSX, and the `applyDiff` function can be used to render it in the actual DOM. WebJSX also facilitates the creation of custom Web Components. Developers can define custom elements by extending the `HTMLElement` class and implementing lifecycle methods such as `connectedCallback` and `attributeChangedCallback`. This allows for dynamic rendering based on attribute changes, with the ability to use JSX within the custom elements. Event handling is made easy with JSX, allowing developers to attach event listeners directly within their markup. Additionally, the library supports fragments, enabling the grouping of multiple elements without adding extra nodes to the DOM. The API includes methods for creating virtual DOM elements, applying differences to the DOM, and handling fragments. There are also advanced features like rendering suspension, which allows for batching property updates to minimize re-renders. For TypeScript users, WebJSX provides configuration options to handle JSX properly, and developers can declare custom elements to avoid TypeScript errors related to unknown HTML tags. WebJSX can be bundled with various tools, but it also supports direct module loading in web pages, making it flexible for different development environments. The library encourages community contributions, welcoming bug reports, feature suggestions, and pull requests. Overall, WebJSX is an open-source project licensed under the MIT license, aimed at simplifying the development of web applications with modern web standards.

Million.js is a minimalistic JavaScript compiler that improves React's performance by reducing memory usage and enhancing rendering speed through a granular approach to DOM updates. It uses optimized higher-order components called blocks to achieve these performance gains.

Web development started with simple HTML and CSS. Eventually, client-side JavaScript allowed for more dynamic websites. The need for SEO and performance led to the creation of server-side rendering and frameworks like Next.js. JavaScript's shortcomings led to TypeScript and Svelte. At the end of the day, the core goal of all these evolutions was to create enjoyable user experiences, so the tools being used don't matter much.

The DOM allows developers to interact with and manipulate web documents as a tree of nodes using APIs like querySelector(), createElement(), and appendChild(). Efficient DOM manipulation can improve performance by preferring methods such as textContent over innerText and using insertAdjacentHTML over innerHTML. Proper memory and event management, along with performance profiling, are also necessary in performance-sensitive scenarios especially.

WinterJS is a new high-speed JavaScript runtime built with Rust and the SpiderMonkey engine. While Bun has more comprehensive toolkit features, WinterJS focuses more on speed and WinterCG compliance, but lacks Windows and TypeScript support. While initial performance tests favor Bun, WinterJS shows potential when it is run natively.

A virtual DOM makes UI modification easier by tracking changes in a simplified representation of the DOM. A library tracks changes to the root DOM element by keeping a structure of virtual nodes, representing each HTML element. When the state changes, the library creates a new virtual DOM, compares it to the previous one (diffing), and applies the differences to the real DOM, making sure it matches the desired state.

TypeScript has become the default language of choice as web development has embraced static typing during the past decade. However, there are times when you don’t want to use TypeScript, whether due to tooling constraints, longer setup and compile time, or a team member who does not like static typing. JSDoc is a good alternative as it can be understood by the TypeScript compiler and lets you take advantage of some of the benefits of static typing without needing a single .ts file. This post serves as a crash course in using JSDoc as an alternative syntax for TypeScript and covers the important TypeScript-related features.

htmx offers a simpler alternative to frameworks in frontend development by enhancing HTML with attributes that enable AJAX-like functionality, utilizing the hypermedia concept to create RESTful applications without excessive JavaScript.

The parallel-dom npm package offloads heavy DOM operations to parallel iframes for faster rendering. It supports both plain JavaScript and React.

Maska is a lightweight JavaScript library that allows you to create input masks without any external dependencies.

Tsx is a command-line tool that allows you to run TypeScript code in Node.js without any configuration. It supports both CommonJS and ES Modules and comes with a built-in watcher for faster iteration.

ExpressoTS is a Typescript and Node.js framework for quickly building scalable, easy-to-read and maintain server-side applications.

A list of various JavaScript engines and libraries for real-time 2D and 3D graphics in web browsers.

JavaScript has changed a lot since 2015, especially thanks to improvements in the ECMAScript specification. Early JavaScript was difficult to work with due to issues like function-scoped variables and callback hell. Modern JavaScript has introduced features like block-scoped variables, arrow functions, promises, and async/await, which makes development much better. Tooling has also gotten better.

RoundtableJS is an open-source JavaScript library for building complex surveys, forms, and data annotation tasks. It's designed to be simple but completely customizable. It makes it easy to add complex logic (e.g. branching, skipping, looping), modify question types, and fully customize the design.

An online book for learning JavaScript.

A from-scratch experimental ahead-of-time JS engine.

JavaScript bundles on modern websites are much bigger than they need to be, even for simple functionalities. Popular websites, like ChatGPT and YouTube, have a high amount of client-side JavaScript bloat that doesn't always match the functionality the page offers. Certain websites, like adult websites, prioritize fast loading speeds and have small JavaScript bundles.

JavaScript bundles on modern websites are much bigger than they need to be, even for simple functionalities. Popular websites, like ChatGPT and YouTube, have a high amount of client-side JavaScript bloat that doesn't always match the functionality the page offers. Certain websites, like adult websites, prioritize fast loading speeds and have small JavaScript bundles.

TypeScript's new isolated declarations feature simplifies code packaging by automatically generating .d.ts files. This improves the "go to source" functionality and also removes the need to manually create these files. It makes publishing packages faster by shifting definition file generation from the publishing process to the installation process.

Node.js has added an experimental flag called --experimental-strip-types that transpiles TypeScript source code into JavaScript source code.

Node.js addons are dynamic libraries crafted in low-level programming languages such as C, C++, or Rust, designed to be integrated into Node.js applications. These addons serve as a bridge between JavaScript and native code, enabling developers to harness system-level resources, enhance performance, and incorporate external native libraries into their JavaScript code. This integration allows for a more efficient execution of tasks that require heavy computation or direct system access. The primary reasons for utilizing Node.js addons include performance optimization, access to system resources, and the ability to integrate existing native libraries. JavaScript, while versatile, is not always the best choice for performance-critical tasks like image processing or real-time data handling. By offloading these tasks to native code, developers can achieve better efficiency. Additionally, Node.js operates within a sandboxed environment, limiting direct access to system resources. Addons circumvent this limitation by exposing low-level system calls and enabling multi-threaded operations. Furthermore, many well-established libraries are written in C/C++, and addons allow developers to leverage these without the need to rewrite them in JavaScript. To create a Node.js addon, developers typically use Node-API (N-API), which provides a stable interface for writing native code. N-API abstracts the differences between various Node.js versions and the underlying JavaScript engine, ensuring compatibility with future releases. The process of creating an addon involves several steps: implementing the core logic in a low-level language, binding it with N-API to expose native functions to JavaScript, compiling the native code into a binary file, and finally, requiring the compiled addon in a JavaScript application. A practical example of creating a Node.js addon is demonstrated through a simple string manipulation task, specifically reversing a string. The core logic is implemented in C++, where a function is defined to reverse the input string. This function is then exposed to JavaScript using N-API. The build process is configured using node-gyp, which compiles the C++ code into a .node file. Once compiled, the addon can be utilized in a Node.js application, showcasing how native code can be seamlessly integrated. In conclusion, Node.js addons offer a powerful mechanism for enhancing JavaScript applications by integrating native code. They provide significant performance benefits and access to system-level resources, making them an essential tool for developers working on performance-intensive applications, hardware interactions, or legacy library integrations.

Frontend build systems evolved as JavaScript codebases grew larger and developer needs became more complex. They consist of three steps: transpilation to address unsupported language features, bundling to reduce network requests, and minification to decrease file sizes. These steps are facilitated by tools like Babel, SWC, and Webpack, among others, and enhanced by developer tools like meta-frameworks, sourcemaps, hot module replacement, and monorepo tools.

Next.js needed a new bundler due to the limitations of Webpack in handling large-scale applications, particularly with the increasing use of component libraries and the rise of computationally heavy applications. The new bundler, Turbopack, aims to provide faster HMR and initial compile times, maintain compatibility with existing applications, and scale effectively for large codebases. It will also incorporate persistent caching and production optimizations.

A UI kit for building performant 3D user interfaces for Three.js in React with support for nested scrolling, buttons, inputs, dropdowns, tabs, checkboxes, and more.

React introduced the concept of a "virtual DOM" to optimize web app rendering. Its popularity led to widespread adoption, but also to criticisms regarding its learning curve, state management, and performance. While React's defenders highlight its improvements in recent versions, alternative frameworks like Svelte and Astro offer simpler approaches without relying on the virtual DOM.

TypeScript 5.6 introduces stricter type checking for nullish and truthy checks, new helper methods for iterators, and support for arbitrary module identifiers. It also improves the TypeScript language server by adding region-prioritized diagnostics and granular commit characters and excluding patterns for auto-imports.

Tailwind CSS has some lesser-known features that can make developing web UIs easier. This article goes over a couple of them, such as using gap-* to add space between elements, accent-* utilities to change the color of checkboxes/radio buttons, and peer-* modifiers to style elements based on the state of sibling elements.